<template>
  <div>
    <h1>组件通讯 - 帅峰黑店</h1>
    <!-- 
      在app.vue中 使用了 用了 myProduct组件
      谁用了谁 谁就是父被用的就是子
      所以 
      谁是父？ App是父 
      谁是子？myProduct是子

      父传子步骤
      1. 给子组件（myproduct）加属性 
      2. 在子组件接受props属性
      3. 接受好的props可以在模板里使用，使用的方式和data一样
          获取值 this.xxx和data一样

      关于传值
      如果不用bind动态绑数据，所有的值都是字符串 哪怕写的是true false也是字符串
      用bind绑定的数据 技巧就是 你就看双引号里面是什么    


      子传父
      0. 要传入id 目的：区分是到底砍价砍哪个
      1. 子组件在合适的时机（点击砍价按钮） 通知父组件
          this.$emit('事件名', 参数1，参数2，。。。)
          假设事件名是aaa
      2. 父组件注册对应的事件 （指的就是前面写的事件名）  
          @aaa="自己写的处理的函数"  
      3. 在methods里提供对应的方法（自己写的处理的函数名）    
    -->
    <my-product
      v-for="item in list"
      :key="item.id"
      :title="item.title"
      :price="item.price"
      :desc="item.desc"
      :id="item.id"
      :c="item.c"
      @killPrice="handleKill"
      :a="123"
      :b="456"
      type="success"
    ></my-product>
    <!-- <my-product :title="'哈哈'" :price="'500'" :desc="500"></my-product> -->
    <!-- <my-product :title="title" :price="price" :desc="desc"></my-product> -->
    <!-- <my-product title="口水鸡" price="500" desc="true"></my-product> -->
    <!-- <my-product title="螺蛳粉" price="200" desc="非常臭很美滋滋"></my-product> -->
    <!-- <my-product title="水果盒子" price="100" desc="包甜"></my-product> -->
  </div>
</template>

<script>
/**
 * 1. 创建组件
 * 2. 引入组件
 * 3. 局部注册
 *      components 配置对象 键值对
 * 4. 使用组件
 */
import MyProduct from "./components/MyProduct.vue";
export default {
  components: {
    MyProduct: MyProduct,
  },
  data() {
    return {
      desc: true,
      price: 500,
      title: "口水鸡",
      list: [
        {
          id: 1,
          title: "口水鸡",
          price: 500,
          origin: 20,
          desc: "超级好吃",
          c: 999,
        },
        {
          id: 2,
          title: "螺蛳粉",
          price: 200,
          origin: 15,
          desc: "非常臭很美滋滋",
        },
        {
          id: "3",
          title: "水果盒子",
          price: 100,
          origin: 10,
          desc: "包甜",
        },
      ],
    };
  },
  methods: {
    handleKill(id, x, y, z, w) {
      console.log("儿子通知我的", id, x, y, z, w);
      // 找到对应id的那一项
      const item = this.list.find((item) => item.id === id);
      // 砍价后的钱
      const nowPrice = item.price - 50;
      if (nowPrice >= item.origin) {
        // 同意 砍价
        item.price = nowPrice;
      } else {
        // 不同意我不要亏本
        alert("别砍了 已经很便宜了");
      }
      // item.price -= 10;
    },
  },
};
</script>

<style>
</style>